<template>
  <div>
    <discoverm></discoverm>
    <div class="artist_main">
      <el-container>
        <el-aside style="width: 182px; height: 1100px; border: 1px solid">
          <div
            style="
              width: 180px;
              height: 787px;
              padding: 0 10px 40px 10px;
              margin-top: 51px;
            "
          >
            <el-menu
              :default-active="this.$route.path"
              class="el-menu-vertical-demo artistmenu"
              text-color="rgb(0,0,0)"
              active-text-color="#ffd04b"
              router

            >
              <el-menu-item>
                <span slot="title"><strong>华语</strong></span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=1001" @click="qqq()">
                <span slot="title">华语男歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=1002" @click="qqq()" >
                <span slot="title">华语女歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=1003" @click="qqq()">
                <span slot="title">华语组合/乐队</span>
              </el-menu-item>
              <el-menu-item>
                <span slot="title"><strong>欧美</strong></span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=2001" @click="qqq()">
                <span slot="title">欧美男歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=2002" @click="qqq()" >
                <span slot="title">欧美女歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=2003" @click="qqq()">
                <span slot="title">欧美组合/乐队</span>
              </el-menu-item>
              <el-menu-item>
                <span slot="title"><strong>日本</strong></span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=3001" @click="qqq()">
                <span slot="title">日本男歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=3002" @click="qqq()" >
                <span slot="title">日本女歌手</span>
              </el-menu-item>
              <el-menu-item index="/discover/artist/cat?id=3003" @click="qqq()">
                <span slot="title">日本组合/乐队</span>
              </el-menu-item>
           
            </el-menu>
          </div>
        </el-aside>
        <el-main
          class="artistelm"
          style="width: 719px; height: 1100px; padding: 40px;border-bottom:1px solid"
       
        >
 
           <keep-alive>
          <router-view></router-view>
        </keep-alive>
   
        </el-main>
  
      </el-container>
    </div>
  </div>
</template>

<script>
import { gethotartist } from "@/network/discover.js";
import { getartist } from "@/network/discover.js";
import discoverm from "@/views/discoverM/discoverM.vue";
export default {
  name: "artist",
  data() {
    return {
      hotartist: [],
      homeartist: [],
      ee: [],
      id:13245
    };
  },
  components: {
    discoverm,
  },
  created() {
    // getartist().then((res) => {
    //   for (var b = 10; b <= 77; b++) {
    //     if (b <= 19) {
    //       this.homeartist.push(res.artists[b]);
    //     } else {
    //       this.ee.push(res.artists[b]);
    //     }
    //   }
    // });
    gethotartist().then((res) => {
      for (var p = 0; p <= 9; p++) {
        this.hotartist.push(res.artists[p]);
      }
    });
  },
  methods: {
    // toArtist(id) {
    //   this.$router.push("/artistdetail?id=" + id);
    // },
    qqq(){
      location.reload()
    }
  },
};
</script>

<style>

.artist_main {
  width: 982px;
  height: 1100px;
  margin: 0 auto;
  border: 1px solid;
  border-left: none;
  border-top: none;
}

.main_li {
  line-height: 29px;
}
.blk {
  width: 160px;
  height: 118px;
  padding-top: 16px;
  border-top: 1px solid;
  margin-top: 5px;
}
.tit {
  height: 25px;
  padding-left: 14px;
  font-size: 16px;
}
.fcb {
  width: 160px;
  height: 93px;
  font-size: 12px;
}
.f-cb li {
  width: 160px;
  height: 29px;
  margin-bottom: 2px;
}
.artist-ul {
  width: 736px;
  height: 368px;
  margin-top: 20px;
  font-size: 12px;
  color: #333;
  display: flex;
  flex-wrap: wrap;
}
.artist-li {
  width: 130px;
  height: 154px;
  margin-left: 17px;
  margin-bottom: 30px;
}
.artist-li img {
  width: 130px;
  height: 130px;
}
.homeartist {
  border-top: 1px solid;
}
.homeartist li {
  width: 130px;
  height: 30px;
  padding-left: 17px;
  float: left;
  font-size: 12px;
}
.el-icon-s-custom {
  color: rgb(227, 44, 47);
}
</style>